<template>
  <div class="Application_Management">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="
            this.$route.query.Token
              ? 'top:50px;left:10px'
              : 'top: 100px;padding:10px'
          "
        >
          <el-row>
            <el-col :span="12">
              <el-button
                size="small"
                @click="(status = 99), getTable()"
                :type="status == 99 ? 'primary' : ''"
                >全部</el-button
              >
              <el-button
                size="small"
                @click="(status = 0), getTable()"
                :type="status == 0 ? 'primary' : ''"
                >待审核</el-button
              >
              <el-button
                size="small"
                @click="(status = 1), getTable()"
                :type="status == 1 ? 'primary' : ''"
                >审核通过</el-button
              >
              <el-button
                size="small"
                @click="(status = 2), getTable()"
                :type="status == 2 ? 'primary' : ''"
                >审核未通过</el-button
              >
            </el-col>
            <el-col :span="12">
              <el-button
                style="float: right"
                size="small"
                icon="el-icon-plus"
                @click="open"
                >新增应用</el-button
              >
              <el-button
                size="small"
                style="margin: 0 10px; float: right"
                icon="el-icon-search"
                @click="(page.pege = 1), getTable()"
              ></el-button>
              <el-input
                size="small"
                style="
                  display: inline-block;
                  width: 30%;
                  float: right;
                  margin-right: 10px;
                "
                placeholder="请输入应用名称"
                v-model="search_val"
              ></el-input>
            </el-col>
          </el-row>
          <template>
            <el-table
              :data="tableData"
              style="width: 100%; margin-top: 10px"
              v-loading="isLoading"
              height="600"
            >
              <el-table-column prop="Name" label="应用名称"> </el-table-column>
              <el-table-column prop="HospitalName" label="机构名称">
              </el-table-column>
              <el-table-column prop="VendorName" label="所属厂商">
              </el-table-column>
              <el-table-column prop="Version" label="版本号"> </el-table-column>
              <el-table-column label="应用状态">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.Status == 1 ? true : false"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    disabled
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!-- <el-button
                    type="text"
                    size="mini"
                  >详情</el-button> -->
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    @click="edit(scope.row)"
                  ></el-button>
                  <el-button
                    size="mini"
                    icon="el-icon-delete"
                    @click="del(scope.row)"
                  ></el-button>
                  <el-button
                    v-if="scope.row.Status == 0"
                    size="mini"
                    @click="audit(scope.row.Id, 1)"
                    >通过</el-button
                  >
                  <el-button
                    v-if="scope.row.Status == 0"
                    size="mini"
                    @click="audit(scope.row.Id, 2)"
                    >拒绝</el-button
                  >
                  <!-- <el-button
                    type="text"
                    size="mini"
                  >测试</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 页码 -->
          <div class="block" style="text-align: center">
            <el-pagination
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.limit"
              :current-page="page.page"
              @current-change="page_change"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 弹层 -->
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="45%"
          :before-close="handleClose"
          :append-to-body="true"
          :close-on-click-modal="false"
        >
          <el-form
            label-position="right"
            label-width="120px"
            :model="formLabelAlign"
          >
            <el-form-item
              label="*应用名称："
              style="display: inline-block; width: 50%"
            >
              <el-input v-model="formLabelAlign.Name"></el-input>
            </el-form-item>
            <el-form-item
              label="*所属厂商："
              style="display: inline-block; width: 50%"
            >
              <el-select
                filterable
                v-model="formLabelAlign.Vendor"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in Vendor_List"
                  :key="item.Id"
                  :label="item.VendorName"
                  :value="item.Id + ''"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="*系统编码："
              style="display: inline-block; width: 50%"
            >
              <el-input v-model="formLabelAlign.Code"></el-input>
            </el-form-item>
            <el-form-item
              label="*版本："
              style="display: inline-block; width: 50%"
            >
              <el-input v-model="formLabelAlign.Version"></el-input>
            </el-form-item>
            <el-form-item
              label="*医院："
              style="display: inline-block; width: 50%"
            >
              <el-select
                v-model="formLabelAlign.HospitalId"
                placeholder="请选择"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in Hospital"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id + ''"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="btn_yes">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      search_val: "",
      page: {
        page: 1,
        limit: 10,
        total: 1,
      },
      dialogVisible: false,
      formLabelAlign: {},
      title: "",
      Vendor_List: [],
      status: 99,
      isLoading: false,
      Hospital: [],
    };
  },
  methods: {
    getTable() {
      // 获取表格数据
      this.isLoading = true;
      this.$post(
        "/ServiceManage/Application/List?keyword=" +
          this.search_val +
          "&page=" +
          this.page.page +
          "&limit=" +
          this.page.limit +
          "&status=" +
          this.status
      ).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.isLoading = false;
        }
      });
    },
    getVendor_List() {
      // 获取厂商数据
      this.$post("/ServiceManage/Vendor/List").then((res) => {
        if (res.code == 0) {
          this.Vendor_List = res.data;
        }
      });
    },
    open() {
      // 打开弹层
      this.title = this.formLabelAlign.Id ? "修改" : "新增";
      this.dialogVisible = true;
    },
    handleClose() {
      // 关闭弹层
      this.dialogVisible = false;
      this.formLabelAlign = {};
    },
    page_change(val) {
      // 页码切换
      this.page.page = val;
      this.getTable();
    },
    edit(val) {
      // 修改
      var info = JSON.stringify(val);
      this.formLabelAlign = JSON.parse(info);
      this.open();
    },
    del(val) {
      // 删除
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("/ServiceManage/Application/Delete/" + val.Id).then(
            (res) => {
              if (res.code == 0) {
                this.getTable();
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              }
            }
          );
        })
        .catch((_) => {});
    },
    btn_yes() {
      if (
        this.formLabelAlign.Name == null ||
        this.formLabelAlign.Name == "" ||
        this.formLabelAlign.Vendor == null ||
        this.formLabelAlign.Vendor == "" ||
        this.formLabelAlign.Code == null ||
        this.formLabelAlign.Code == "" ||
        this.formLabelAlign.Version == null ||
        this.formLabelAlign.Version == "" ||
        this.formLabelAlign.HospitalId == null ||
        this.formLabelAlign.HospitalId == ""
      ) {
        this.$message({
          message: "请完整填写必填项！",
          type: "error",
        });
        return;
      }
      // 弹窗保存按钮
      let url = this.formLabelAlign.Id
        ? "/ServiceManage/Application/Update"
        : "/ServiceManage/Application/Create";
      this.$post(url, this.formLabelAlign).then((res) => {
        if (res.code == 0) {
          this.getTable();
          this.handleClose();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    audit(id, state) {
      // 状态操作事件
      this.$post(
        "/ServiceManage/Application/Audit?id=" + id + "&status=" + state
      ).then((res) => {
        if (res.code == 0) {
          this.getTable();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    getHospital() {
      // 获取医院数据
      this.$get("/notoken/organs").then((res) => {
        if (res.code == 0) {
          this.Hospital = res.data;
        }
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTable();
    this.getVendor_List();
    this.getHospital();
  },
};
</script>
<style lang="scss">
.Application_Management {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
